{% extends 'base.html' %}
{% load staticfiles %}
{% block title %}琢越网{% endblock %}

{% block custom_js %}<script src="/static/js/jquery-3.3.1.min.js"></script>{% endblock %}
{% block custom_css %}<link rel="stylesheet" href="/static/css/mystyle.css">{% endblock %}

{% block content %}
    <div class="row clearfix">
				<div class="col-md-9 column ">
					<div class="row clearfix col-div"><!笔记展示>
						<div class="media" style="margin:10px 10px 5px 10px">
							<h4 class="col-h4">{{ note.note_title }}<span class="badge col-badge col-badge-n">笔记</span></h4>
							<p class="pull-right tool">{{ note.create_saved }}</p> <!!!>
							<p class="pull-right tool">发表于：</p>
							<a href="#" class="pull-left"><img src="{% static 'img/2.jpg' %}"  width=40px height=40px/></a>
							<a href="#" target=_blank style="text-decoration:none;">
                                <p class="tool">{{ note.userprofile_id.username }}</p>
							    <p class="tool">{{ note.userprofile_id.introduction }}</p>
							</a>
                            <span class="label label-warning">默认标签</span>
							<span class="label label-warning">默认标签</span>
							<span class="label label-warning">默认标签</span>
							<span class="label label-warning">默认标签</span>
							<span class="label label-warning">默认标签</span>
							<span class="label label-warning">默认标签</span>
							<p>{{ note.note_content }}</p>
							<a role="button" class="btn tool">
								<span class="glyphicon glyphicon-thumbs-up" ></span>点赞</a>
							<a role="button" class="btn tool">
								<span class="glyphicon glyphicon-thumbs-down" ></span>没用</a>
							<a onclick="copyUrl()" role="button" class="btn tool">
								<span class="glyphicon glyphicon-link" >分享
							</a>
							<a onclick="collect()" role="button" class="btn tool">
								<span class="glyphicon glyphicon-star"></span>收藏
							</a>
							<a href="#modal-container-tip-off" role="button" class="btn tool" data-toggle="modal">
								<span class="glyphicon glyphicon-exclamation-sign" ></span>举报
							</a>
							<!举报模态框>
							<div class="modal fade" id="modal-container-tip-off" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
								<div class="modal-dialog">
									<div class="modal-content">
										<div class="modal-header"> <!头>
											<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
											<h4 class="modal-title" id="myModalLabel"></span>举报</h4>
										</div>
										<div class="modal-body"> <!中间部分>
											<textarea class="form-control" style="height:200px" placeholder="请填写举报信息"></textarea>
										</div>
										<div class="modal-footer"> <!脚>
											<button type="button" class="btn btn-primary" data-dismiss="modal">提交</button>
										</div>
									</div>
								</div>
							</div>
							<a role="button" class="but-click btn tool" data-toggle="modal">
								<span class="glyphicon glyphicon-pencil" ></span>评论
							</a>
							<p class="pull-right tool">{{ note.note_reading_quantity }}</p> <!!!>
							<label class="pull-right tool">浏览：</label>
							<p class="pull-right tool">xxx</p> <!!!>
							<label class="pull-right tool">收藏：</label>
							<!评论框>
                            <form action="{% url "note:note_comment_action" %}" method="POST">
                                {% csrf_token %}
                                <div  class="remark-div" style="display:none" >
                                    <input name="comment_userprofile_id" type="hidden" value="">
                                    <input name="note_id" type="hidden" value="{{ note.id }}">
                                    <textarea name="note_comment" class="form-control" width=100% style="margin:5px 0px 5px 0px" placeholder="请写下您的评论"></textarea>
                                    <button type="submit" class="btn btn-default pull-right publish">发表</button>
                                </div>
                            </form>
						</div>
					</div>
					<div class="row-mar-lg col-div"><!评论展示区>
                        <!--循环开始-->
                        {% for note_comment in note_comments %}
                        <div class="row clearfix"><!评论1>
                            <div class="col-md-1 column"> <!--点赞、没用操作区-->
                                 <a role="button" class="btn tool">
                                    <span class="glyphicon glyphicon-thumbs-up" ></span></a>
                                <a role="button" class="btn tool">
                                    <span class="glyphicon glyphicon-thumbs-down" ></span></a>
                             </div>
                            <div class="col-md-10 column sub-div-sm sub-margin"><!--评论正文-->
                                <div class="">
                                    <div><!--这个div为了凑数的……可忽略-->
                                        {% if note_comment.note_comment_userprofile_id is null %}
                                        <a class="btn tool " href="#" target=_blank>{{ note_comment.userprofile_id }}:</a>{{ note_comment.note_comment_content }}
                                        {% else %}
                                        <a class="btn tool " href="#" target=_blank>{{ note_comment.userprofile_id }}</a>评论
                                        <a class="btn tool " href="#" target=_blank>{{ note_comment.note_comment_userprofile_id }}：</a>
                                        {{ note_comment.note_comment_content }}
                                        {% endif %}
                                        <a role="button" class="but-click btn tool " data-toggle="modal">
                                            <span class="glyphicon glyphicon-pencil" ></span>评论
                                        </a>
                                        <!--评论框-->
                                        <form action="{% url "note:note_comment_action" %}" method="POST">
                                        {% csrf_token %}
                                        <div  class="remark-div" style="display:none" >
                                            <input name="note_id" type="hidden" value="{{ note.id }}">
                                            <input name="comment_userprofile_id" type="hidden" value="{{ note_comment.userprofile_id }}">
                                            <textarea name="note_comment" class="form-control" width=100% style="margin:5px 0px 5px 0px" placeholder="请写下您的评论"></textarea>
                                            <button type="submit" class="btn btn-default  publish">发表</button>
                                        </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <br>
                        <!--循环结束-->
                        {% endfor %}
					</div>

				</div>

				<div class="col-md-3 column"> <!右部分>
					<div class="row clearfix col-div"> <!笔记话题>
						<h4 class="text-center col-h4">笔记话题</h4>
						<hr>
						<div class="right-div">
							<a href="#" target==_blank class="right-text">话题1</a>
							<br><a href="#" target==_blank class="right-text">话题2</a>
						</div>

					</div>

				</div>
	</div>
{% endblock %}
{% block custom_script %}
    <script>
    // -对评论框的控制-
	$(document).ready(function(){
		var div;
		// 显示or隐藏评论框
		$(".but-click").click(function(){
			div= $(this).parent("div").parent("div").find(".remark-div"); //取button的div父级d的div父级，再通过.remark-div类找到评论框
			var display = div.css("display");
			if( display=="none")
				div.css("display","block");
			else
				div.css("display","none");
			//div[0].style.display = "block"; //设置div的style为可见
		});
		// 判断评论是否有效
		$(".publish").click(function(){
			var comment =  $(this).parent("div").find("textarea")[0].value;
			console.log(comment);
			/*if( typeof(comment)=="undefined" || comment=="")
				alert("评论为空！");
			else{
				div.css("display","none");
				alert("发表成功!");
			}*/
		});
	});
	//var collectFlag = 1;
	function collect(){
		alert("收藏成功!")
	/*	if( collectFlag==1){

			collectFlag = 2;
		}
		else{
			alert("已取消收藏!")
			collectFlag = 1;
		}
	*/
	}
	function copyUrl()
   {
		var clipBoardContent=this.location.href;  // 这个方法firefox会报错！IE适用
		window.clipboardData.setData("Text",clipBoardContent);
		alert("文章链接复制成功!");
   }
</script>
{% endblock %}